<template>
  <div class="container">
    <div class="header">
      <i class="el-icon-collection"></i>
      <span>个人信息-{{activeMenuName }}</span>
    </div>
    <div class="content">
      <el-col :span="4">
        <el-menu
          default-active="activeMenuItemIndex"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <!-- <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu> -->
          <el-menu-item index="1" @click="handleMenuItemClick('1')">
            <i class="el-icon-menu"></i>
            <span slot="title">基本设置</span>
          </el-menu-item>
          <el-menu-item index="2" @click="handleMenuItemClick('2')">
            <i class="el-icon-menu"></i>
            <span slot="title">安全设置</span>
          </el-menu-item>
          <el-menu-item index="3" @click="handleMenuItemClick('3')">
            <i class="el-icon-document"></i>
            <span slot="title">账号绑定</span>
          </el-menu-item>
          <el-menu-item index="4" @click="handleMenuItemClick('4')">
            <i class="el-icon-setting"></i>
            <span slot="title">新消息通知</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <div class="content-from" v-if="activeMenuItemIndex === '1'">
          <h2>基本设置</h2>
          <el-row>
            <el-col :span="10">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="邮箱">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                  <el-input v-model="form.name"></el-input>
                  <!-- <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select> -->
                </el-form-item>
                <el-form-item label="个人简介">
                  <el-input type="textarea" v-model="form.desc"></el-input>
                  <!-- <el-col :span="11">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="form.date1"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-time-picker
                      placeholder="选择时间"
                      v-model="form.date2"
                      style="width: 100%"
                    ></el-time-picker>
                  </el-col> -->
                </el-form-item>
                <el-form-item label="国家地区">
                  <el-select v-model="value" clearable placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所在省市">
                  <el-select v-model="value1" multiple placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.index"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="value2"
                    multiple
                    collapse-tags
                    style="margin-left: 20px"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="街道地址">
                  <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit"
                    >更新信息</el-button
                  >
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="3" style="margin-left: 150px">
              <p>邮箱</p>
              <img
                src="../../assets/top-bar/nav_user.png"
                style="width: 150px; height: 150px; margin-right: 10px"
              />
              <el-button style="margin-left: 25px">更换头像</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="content-from" v-if="activeMenuItemIndex === '2'">
          <h2>安全设置</h2>
          <el-col :span="12">
            <div class="list">
              <div class="list-revise">
                <h4>账户密码</h4>
                <el-button type="text">修改</el-button>
              </div>
              <div>
                <el-descriptions title="">
                  <el-descriptions-item label="当前密码强度" class="password-strength"
                    >强</el-descriptions-item
                  >
                </el-descriptions>
              </div>
            </div>
            <div class="list">
              <div class="list-revise">
                <h4>密保问题</h4>
                <el-button type="text">修改</el-button>
              </div>
              <div>
                <el-descriptions title="">
                  <el-descriptions-item label="已绑定手机" class=""
                    >138****8293</el-descriptions-item
                  >
                </el-descriptions>
              </div>
            </div>
            <div class="list">
              <div class="list-revise">
                <h4>备用邮箱</h4>
                <el-button type="text">修改</el-button>
              </div>
              <div>
                <el-descriptions title="">
                  <el-descriptions-item label="" class=""
                    >未设置密保问题，密保问题可有效保护账户安全</el-descriptions-item
                  >
                </el-descriptions>
              </div>
            </div>
            <div class="list">
              <div class="list-revise">
                <h4>备用邮箱</h4>
                <el-button type="text">修改</el-button>
              </div>
              <div>
                <el-descriptions title="">
                  <el-descriptions-item label="已绑定邮箱" class=""
                    >ant***alipay.com</el-descriptions-item
                  >
                </el-descriptions>
              </div>
            </div>
            <div class="list">
              <div class="list-revise">
                <h4>MFA设备</h4>
                <el-button type="text">修改</el-button>
              </div>
              <div>
                <el-descriptions title="" class="no-colon">
                  <el-descriptions-item label="" class=""
                    >未绑定 MFA 设备，绑定后，可以进行二次确认</el-descriptions-item
                  >
                </el-descriptions>
              </div>
            </div>
          </el-col>
        </div>
        <div class="content-from" v-if="activeMenuItemIndex === '3'">
          <h2></h2>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="活动名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.date1"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="form.date2"
                  style="width: 100%"
                ></el-time-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="即时配送">
              <el-switch v-model="form.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质">
              <el-checkbox-group v-model="form.type">
                <el-checkbox
                  label="美食/餐厅线上活动"
                  name="type"
                ></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源">
              <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="content-from" v-if="activeMenuItemIndex === '4'">
          <h2>新消息通知</h2>
          <div class="list">
              <div class="list-revise">
                <h4>消息通知</h4>
                <el-switch v-model="form.delivery"></el-switch>
              </div>
              <div>
                其他用户的消息将以站内信的形式通知
              </div>
            </div>
            <div class="list">
              <div class="list-revise">
                <h4>系统通知</h4>
                <el-switch v-model="form.delivery"></el-switch>
              </div>
              <div>
                系统消息将以站内信的形式通知
              </div>
            </div>
            <div class="list">
              <div class="list-revise">
                <h4>待办通知</h4>
                <el-switch v-model="form.delivery"></el-switch>
              </div>
              <div>
                待办事项将以站内信的形式通知
              </div>
            </div>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
export default {
  name: "personalSetting",
  components: {},
  data() {
    return {
      activeMenuItemIndex: "1",
      activeMenuName: "基本设置", // 默认初始值
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      options: [
        {
          id: 1,
          value: "选项1",
          label: "黄金糕",
        },
        {
          id: 2,
          value: "选项2",
          label: "双皮奶",
        },
        {
          id: 3,
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          id: 4,
          value: "选项4",
          label: "龙须面",
        },
        { 
          id: 5,
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      value1: "",
      value2: "",

    };
  },
  created() {
    // 根据实际情况设置默认选中的菜单索引
    this.activeMenuItemIndex = "1";
    
  },
  methods: {
    handleMenuItemClick(index) {
      this.activeMenuItemIndex = index;
      // 根据索引设置对应的菜单名称
    switch (index) {
        case "1":
          this.activeMenuName = "基本设置";
          break;
        case "2":
          this.activeMenuName = "安全设置";
          break;
        case "3":
          this.activeMenuName = "账号绑定";
          break;
        case "4":
          this.activeMenuName = "新消息通知";
          break;
        default:
          this.activeMenuName = "未知菜单";
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    onSubmit() {},
  },
};
</script>

<style lang="scss" scoped>
.container {
  // padding: 1rem;
  background: #fff;
  margin-top: 1.5rem;
  height: 100vh;
}

.header {
  height: 4rem;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  color: #03146b;
  font-size: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
  background: #fff;
  /* 确保背景为白色 */
}

.content {
  margin: 2rem 3rem;
  height: 100%;
  border: #eceaeae8 1px solid;
  padding: 1rem 10rem 3rem 3rem;
  display: flex;
}
.el-menu--collapse .el-submenu,
.el-menu-item {
  font-size: 18px;
}
.block {
  display: flex;
  gap: 16px; /* Adjust gap to your preference */
  margin-top: 20px;
}

/* 这部分是增加按钮圆角的样式 */
.el-button {
  border-radius: 5px;
  /* 增大圆角 */
}

.el-button--primary {
  border-radius: 5px;
  /* 确保主要按钮也有相同的圆角 */
}
.el-form-item {
  margin-bottom: 50px; /* 可以根据需要调整这个值 */
}
.content-from {
  h2 {
    margin-left: 40px;
  }
  .list{
    height: 100px;
    width: 50vw;
    margin: 0 0 20px 40px;
    border-bottom: #c6bfbf 1px solid;
    .list-revise {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  }
  }
  
}
.password-strength {
  color: rgb(81, 233, 43);
}
.no-colon .el-descriptions__label::after {
    content: '';
  }
</style>
